<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI视频合成工具</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary: #4361ee;
      --primary-dark: #3a56d4;
      --secondary: #7209b7;
      --success: #06d6a0;
      --warning: #ffd166;
      --danger: #ef476f;
      --light: #f8f9fa;
      --dark: #212529;
      --gray: #6c757d;
      --light-gray: #e9ecef;
      --border-radius: 10px;
      --box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #f5f7fa, #e4edf9);
      color: #333;
      line-height: 1.6;
      padding: 20px;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    header {
      text-align: center;
      margin-bottom: 30px;
      padding: 30px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      border-radius: var(--border-radius);
      color: white;
      box-shadow: var(--box-shadow);
      position: relative;
      overflow: hidden;
    }
    
    header::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
      transform: rotate(30deg);
    }
    
    header h1 {
      font-size: 2.8rem;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
      text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    header p {
      font-size: 1.2rem;
      opacity: 0.9;
      position: relative;
      z-index: 2;
      max-width: 700px;
      margin: 0 auto;
    }
    
    .tabs {
      display: flex;
      margin-bottom: 25px;
      background: white;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      overflow: hidden;
    }
    
    .tab {
      flex: 1;
      padding: 18px 25px;
      cursor: pointer;
      font-weight: 600;
      text-align: center;
      transition: var(--transition);
      position: relative;
      color: var(--gray);
      background: white;
    }
    
    .tab.active {
      background: linear-gradient(to right, var(--primary), var(--secondary));
      color: white;
    }
    
    .tab:not(.active):hover {
      background: var(--light);
    }
    
    .tab i {
      margin-right: 8px;
    }
    
    .tab-content {
      display: none;
      background: white;
      padding: 30px;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      margin-bottom: 30px;
      animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .tab-content.active {
      display: block;
    }
    
    .card {
      background: white;
      border-radius: var(--border-radius);
      padding: 25px;
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
      margin-bottom: 25px;
      border: 1px solid rgba(0,0,0,0.05);
    }
    
    .card-title {
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--light-gray);
      display: flex;
      align-items: center;
    }
    
    .card-title i {
      margin-right: 10px;
      background: rgba(67, 97, 238, 0.1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
    }
    
    .form-group {
      margin-bottom: 25px;
    }
    
    label {
      display: block;
      margin-bottom: 10px;
      font-weight: 600;
      color: var(--dark);
      font-size: 1.05rem;
    }
    
    input[type="text"] {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid #ddd;
      border-radius: var(--border-radius);
      font-size: 1rem;
      transition: var(--transition);
      background: var(--light);
    }
    
    input[type="text"]:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }
    
    .input-group {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .input-group input {
      flex: 1;
    }
    
    .upload-container {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    
    .file-input-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
      flex: 1;
    }
    
    .file-input-wrapper input[type=file] {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    
    .upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px 20px;
      background: white;
      color: var(--dark);
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: var(--transition);
      border: 2px dashed #ddd;
      text-align: center;
      width: 100%;
      font-weight: 500;
    }
    
    .upload-btn:hover {
      border-color: var(--primary);
      background: rgba(67, 97, 238, 0.05);
    }
    
    .upload-btn i {
      margin-right: 10px;
      font-size: 1.2rem;
      color: var(--primary);
    }
    
    .filename {
      flex: 1;
      padding: 14px 18px;
      background: var(--light);
      border-radius: var(--border-radius);
      border: 1px solid #ddd;
      min-width: 250px;
      font-size: 0.95rem;
    }
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 28px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 1.05rem;
      font-weight: 600;
      transition: var(--transition);
      text-align: center;
      gap: 10px;
    }
    
    .btn:hover {
      background: var(--primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
    }
    
    .btn-success {
      background: var(--success);
    }
    
    .btn-success:hover {
      background: #05b98a;
      box-shadow: 0 5px 15px rgba(6, 214, 160, 0.3);
    }
    
    .btn-warning {
      background: var(--warning);
      color: var(--dark);
    }
    
    .btn-warning:hover {
      background: #ffc84d;
      box-shadow: 0 5px 15px rgba(255, 209, 102, 0.3);
    }
    
    .btn-danger {
      background: var(--danger);
    }
    
    .btn-danger:hover {
      background: #e0355f;
      box-shadow: 0 5px 15px rgba(239, 71, 111, 0.3);
    }
    
    .btn-group {
      display: flex;
      gap: 15px;
      margin-top: 25px;
      flex-wrap: wrap;
    }
    
    .btn-block {
      display: block;
      width: 100%;
    }
    
    #log {
      margin-top: 30px;
      background: var(--light);
      padding: 20px;
      border-radius: var(--border-radius);
      min-height: 200px;
      max-height: 300px;
      overflow-y: auto;
      white-space: pre-wrap;
      font-family: 'Courier New', monospace;
      font-size: 0.95rem;
      border: 1px solid #ddd;
    }
    
    .log-entry {
      margin-bottom: 10px;
      line-height: 1.4;
      padding: 8px 12px;
      border-radius: 5px;
      background: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .log-success {
      color: var(--success);
      border-left: 3px solid var(--success);
    }
    
    .log-error {
      color: var(--danger);
      border-left: 3px solid var(--danger);
    }
    
    .log-info {
      color: var(--primary);
      border-left: 3px solid var(--primary);
    }
    
    .log-warning {
      color: var(--warning);
      border-left: 3px solid var(--warning);
    }
    
    .video-container {
      width: 100%;
      background: #000;
      border-radius: var(--border-radius);
      overflow: hidden;
      margin: 20px 0;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    video {
      width: 100%;
      display: block;
    }
    
    .help-section {
      background: #fff9db;
      border-left: 4px solid var(--warning);
      padding: 25px;
      border-radius: var(--border-radius);
      margin-top: 30px;
    }
    
    .help-section h3 {
      color: #e67700;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      font-size: 1.4rem;
    }
    
    .help-section h3 i {
      margin-right: 10px;
    }
    
    .step {
      display: flex;
      margin-bottom: 25px;
      align-items: flex-start;
    }
    
    .step-number {
      background: #ffd8a8;
      color: #e67700;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
      margin-right: 20px;
      margin-top: 3px;
      font-size: 1.1rem;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }
    
    .step-content {
      flex: 1;
    }
    
    .step-content h4 {
      font-size: 1.2rem;
      margin-bottom: 8px;
      color: #d35400;
    }
    
    .step-image {
      width: 100%;
      border-radius: var(--border-radius);
      margin-top: 15px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      border: 1px solid rgba(0,0,0,0.05);
    }
    
    .digital-videos {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }
    
    .video-card {
      background: white;
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      transition: var(--transition);
      position: relative;
    }
    
    .video-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }
    
    .video-thumb {
      height: 180px;
      background: linear-gradient(45deg, var(--primary), var(--secondary));
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    .video-thumb::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
    }
    
    .play-icon {
      width: 60px;
      height: 60px;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: var(--transition);
    }
    
    .play-icon:hover {
      transform: scale(1.1);
      background: white;
    }
    
    .play-icon::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      border-left: 18px solid var(--primary);
      margin-left: 5px;
    }
    
    .video-info {
      padding: 20px;
    }
    
    .video-title {
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--dark);
      font-size: 1.2rem;
    }
    
    .video-meta {
      display: flex;
      justify-content: space-between;
      color: var(--gray);
      font-size: 0.9rem;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--light-gray);
    }
    
    .actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    .action-btn {
      flex: 1;
      text-align: center;
      padding: 10px;
      background: var(--light);
      border-radius: 6px;
      color: var(--dark);
      text-decoration: none;
      font-size: 0.95rem;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    
    .action-btn:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-3px);
    }
    
    .section-title {
      font-size: 1.7rem;
      margin: 30px 0 25px;
      color: var(--primary);
      padding-bottom: 15px;
      border-bottom: 2px solid var(--light-gray);
      display: flex;
      align-items: center;
    }
    
    .section-title i {
      margin-right: 12px;
      background: rgba(67, 97, 238, 0.1);
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
    }
    
    .status-badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      margin-left: 10px;
    }
    
    .status-processing {
      background: rgba(255, 209, 102, 0.2);
      color: #e67700;
    }
    
    .status-completed {
      background: rgba(6, 214, 160, 0.2);
      color: #0a8754;
    }
    
    @media (max-width: 768px) {
      .btn-group {
        flex-direction: column;
      }
      
      .input-group {
        flex-direction: column;
      }
      
      .upload-container {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .digital-videos {
        grid-template-columns: 1fr;
      }
      
      header h1 {
        font-size: 2.2rem;
      }
      
      .tabs {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1><i class="fas fa-video"></i> AI视频合成工具</h1>
      <p>将音频与视频完美融合，创建专业的数字人视频内容</p>
    </header>
    
    <div class="tabs">
      <div class="tab active" onclick="switchTab('synthesize')">
        <i class="fas fa-sliders-h"></i> 视频合成
      </div>
      <div class="tab" onclick="switchTab('digital')">
        <i class="fas fa-user-circle"></i> 数字人视频库
      </div>
    </div>
    
    <!-- 视频合成标签页 -->
    <div id="synthesize" class="tab-content active">
      <div class="card">
        <h2 class="card-title"><i class="fas fa-upload"></i> 上传文件</h2>
        
        <div class="form-group">
          <label><i class="fas fa-music"></i> 音频文件 (.wav)</label>
          <div class="upload-container">
            <div class="file-input-wrapper">
              <div class="upload-btn">
                <i class="fas fa-file-audio"></i> 选择音频文件
                <input type="file" id="audioFile" accept=".wav">
              </div>
            </div>
            <div class="filename" id="audioFilename">未选择文件</div>
            <button class="btn" onclick="uploadFile()">
              <i class="fas fa-cloud-upload-alt"></i> 上传
            </button>
          </div>
        </div>
        
        <div class="form-group">
          <label><i class="fas fa-film"></i> 视频文件 (.mp4)</label>
          <div class="upload-container">
            <div class="file-input-wrapper">
              <div class="upload-btn">
                <i class="fas fa-file-video"></i> 选择视频文件
                <input type="file" id="videoFile" accept=".mp4">
              </div>
            </div>
            <div class="filename" id="videoFilename">未选择文件</div>
            <button class="btn" onclick="uploadVideo()">
              <i class="fas fa-cloud-upload-alt"></i> 上传
            </button>
          </div>
        </div>
      </div>
      
      <div class="card">
        <h2 class="card-title"><i class="fas fa-tasks"></i> 任务操作</h2>
        
        <div class="form-group">
          <label><i class="fas fa-search"></i> 查询进度（输入任务码）</label>
          <div class="input-group">
            <input type="text" id="taskCodeInput" placeholder="请输入任务码">
            <button class="btn btn-warning" onclick="queryProgressFromInput()">
              <i class="fas fa-sync-alt"></i> 查询进度
            </button>
          </div>
        </div>
        
        <div class="btn-group">
          <button class="btn btn-success" onclick="startVideoMerge()">
            <i class="fas fa-play-circle"></i> 开始合成
          </button>
          <button class="btn btn-danger" onclick="downloadResult()">
            <i class="fas fa-download"></i> 下载结果
          </button>
        </div>
      </div>
      
      <div class="card">
        <h2 class="card-title"><i class="fas fa-info-circle"></i> 任务信息</h2>
        
        <div class="form-group">
          <label><i class="fas fa-barcode"></i> 任务编号</label>
          <input type="text" id="taskCodeBox" readonly>
        </div>
        
        <div class="form-group">
          <label><i class="fas fa-map-marker-alt"></i> 结果位置</label>
          <input type="text" id="taskcom" readonly>
        </div>
        
        <div class="form-group">
          <label><i class="fas fa-terminal"></i> 操作日志</label>
          <div id="log"></div>
        </div>
      </div>
      
      <div class="card">
        <h2 class="card-title"><i class="fas fa-play-circle"></i> 视频预览</h2>
        <div class="video-container">
          <video id="vid" controls>
            <source type="video/mp4">
            您的浏览器不支持视频播放。
          </video>
        </div>
      </div>
      
      <div class="help-section">
        <h3><i class="fas fa-question-circle"></i> 使用指南</h3>
        
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h4>准备文件</h4>
            <p>准备两个格式分别为.wav 和 .mp4 的文件</p>
          </div>
        </div>
        
        <div class="step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h4>上传文件</h4>
            <p><b>（重要）</b>上传两个文件，如果文件比较大，需要等待响应（上传成功后会显示文件名）</p>
          </div>
        </div>
        
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h4>开始合成</h4>
            <p>点击开始合成后会显示任务码，之后可以查询进度（不要点太快）</p>
          </div>
        </div>
        
        <div class="step">
          <div class="step-number">4</div>
          <div class="step-content">
            <h4>查看结果</h4>
            <p>成功后会显示视频预览，同时可以下载</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数字人视频展示标签页 -->
    <div id="digital" class="tab-content">
      <h2 class="section-title"><i class="fas fa-user-circle"></i> 已生成数字人视频</h2>
      <p>以下是根据您的合成任务生成的数字人视频：</p>
      
      <div class="digital-videos">
        <!-- 视频卡片 -->
        <div class="video-card">
          <div class="video-thumb">
            <div class="play-icon" onclick="playVideo('digital-video1')"></div>
          </div>
          <div class="video-info">
            <div class="video-title">产品介绍 <span class="status-badge status-completed">已完成</span></div>
            <p>使用AI合成的产品推广视频，包含语音解说和演示动画</p>
            <div class="video-meta">
              <span><i class="far fa-calendar"></i> 2023-10-15</span>
              <span><i class="far fa-clock"></i> 02:45</span>
            </div>
            <div class="actions">
              <a href="#" class="action-btn"><i class="fas fa-play"></i> 播放</a>
              <a href="#" class="action-btn"><i class="fas fa-download"></i> 下载</a>
            </div>
          </div>
        </div>
        
        <div class="video-card">
          <div class="video-thumb">
            <div class="play-icon" onclick="playVideo('digital-video2')"></div>
          </div>
          <div class="video-info">
            <div class="video-title">教学演示 <span class="status-badge status-completed">已完成</span></div>
            <p>数学课程讲解视频，数字人讲解几何概念</p>
            <div class="video-meta">
              <span><i class="far fa-calendar"></i> 2023-10-10</span>
              <span><i class="far fa-clock"></i> 04:22</span>
            </div>
            <div class="actions">
              <a href="#" class="action-btn"><i class="fas fa-play"></i> 播放</a>
              <a href="#" class="action-btn"><i class="fas fa-download"></i> 下载</a>
            </div>
          </div>
        </div>
        
        <div class="video-card">
          <div class="video-thumb">
            <div class="play-icon" onclick="playVideo('digital-video3')"></div>
          </div>
          <div class="video-info">
            <div class="video-title">企业宣传片 <span class="status-badge status-processing">处理中</span></div>
            <p>公司介绍视频，数字人主持企业宣传内容</p>
            <div class="video-meta">
              <span><i class="far fa-calendar"></i> 2023-10-05</span>
              <span><i class="far fa-clock"></i> 03:15</span>
            </div>
            <div class="actions">
              <a href="#" class="action-btn"><i class="fas fa-play"></i> 播放</a>
              <a href="#" class="action-btn"><i class="fas fa-download"></i> 下载</a>
            </div>
          </div>
        </div>
        
        <div class="video-card">
          <div class="video-thumb">
            <div class="play-icon" onclick="playVideo('digital-video4')"></div>
          </div>
          <div class="video-info">
            <div class="video-title">新闻播报 <span class="status-badge status-completed">已完成</span></div>
            <p>每日新闻摘要，数字人播报最新事件</p>
            <div class="video-meta">
              <span><i class="far fa-calendar"></i> 2023-10-01</span>
              <span><i class="far fa-clock"></i> 02:30</span>
            </div>
            <div class="actions">
              <a href="#" class="action-btn"><i class="fas fa-play"></i> 播放</a>
              <a href="#" class="action-btn"><i class="fas fa-download"></i> 下载</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 页面切换功能
    function switchTab(tabName) {
      document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
      });
      
      document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
      });
      
      document.getElementById(tabName).classList.add('active');
      event.currentTarget.classList.add('active');
    }
    
    // 日志功能
    function logMessage(message) {
      const log = document.getElementById('log');
      const entry = document.createElement('div');
      entry.className = 'log-entry log-info';
      entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
      log.appendChild(entry);
      log.scrollTop = log.scrollHeight;
    }
    
    // 原有功能函数保持不变
    async function submitVideoMerge() {
      const taskCode = crypto.randomUUID();
      const audioUrl = document.getElementById('audioFilename').textContent;
      const videoUrl = document.getElementById('videoFilename').textContent;

      // 如果文件名还是"未选择文件"，则使用输入框的值
      const audio = audioUrl === '未选择文件' ? document.getElementById('taskCodeBox11').value : audioUrl;
      const video = videoUrl === '未选择文件' ? document.getElementById('taskCodeBox22').value : videoUrl;

      if (!audio || !video) {
        logMessage('❌ 请先上传音频和视频文件');
        return null;
      }

      const payload = {
        audio_url: audio,
        video_url: video,
        code: taskCode,
        chaofen: 0,
        watermark_switch: 0,
        pn: 1
      };
      
      try {
        const response = await fetch('http://127.0.0.1:5000/api/submit', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        
        if (!response.ok) {
          throw new Error(`提交失败：${response.status}`);
        }
        
        const data = await response.json();
        console.log(data.success);

        if (data.success) {
          document.getElementById("taskCodeBox").value = taskCode;
          document.getElementById("taskCodeInput").value = taskCode;
          logMessage(`✅ 合成任务已提交，任务码：${taskCode}`);
          return taskCode;
        } else {
          logMessage(`❌ 合成失败，消息：${data.msg}`);
          return null;
        }
      } catch (error) {
        logMessage(`❌ 提交失败：${error}`);
        return null;
      }
    }
    
    async function startVideoMerge() {
      const audioUrl = document.getElementById('audioFilename').textContent;
      const videoUrl = document.getElementById('videoFilename').textContent;
      
      if (audioUrl === '未选择文件' || videoUrl === '未选择文件') {
        logMessage('❌ 请先上传音频和视频文件');
        return;
      }
      
      const taskCode = await submitVideoMerge();
      if (taskCode) {
        // 提交成功后，自动调用查询进度
        await queryProgressFromCode(taskCode);
      }
    }
    
    async function queryProgressFromInput() {
      const code = document.getElementById('taskCodeInput').value.trim();
      if (!code) {
        logMessage('❌ 请输入任务码');
        return;
      }
      await queryProgressFromCode(code);
    }
    
    async function queryProgressFromCode(taskCode) {
      logMessage(`🔄 开始查询任务码：${taskCode} 的合成进度...`);
      
      try {
        const response = await fetch(`http://localhost:5000/api/query?code=${taskCode}`);
        if (!response.ok) {
          throw new Error(`查询失败，状态码：${response.status}`);
        }
        
        const data = await response.json();
        console.log(data);
        
        if (data.code === 10004) {
          logMessage(`📊 查询结果：1.任务早已完成  2.任务不存在  3.服务器还没初始化,等待后重试`);
        } else {
          logMessage(`📊 查询结果：任务进行中`);
          logMessage(`📊 目前情况：${data.data.msg}`);
          logMessage(`📊 结果路径：${data.data.result}`);
          
          // 这个是把结果显示到界面上
          document.getElementById("taskcom").value = `${data.data.result}`;
          
          // 这个是把视频显示到页面上
          const videoPath = data.data.result;
          document.getElementById('vid').querySelector('source').src = `http://localhost:5000/download${videoPath}`;
          document.getElementById('vid').load();
        }
        
        logMessage(`📊 状态码：${data.code}`);
      } catch (error) {
        logMessage(`⚠️ 查询出错：${error}`);
      }
    }
    
    function downloadResult() {
      const input = document.getElementById('taskcom').value;
      if (!input) {
        logMessage('❌ 没有可下载的结果');
        return;
      }
      
      const fileName = input.split('/').pop();
      const downloadUrl = `http://localhost:5000/download/${encodeURIComponent(fileName)}`;
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      logMessage(`⬇️ 已开始下载：${fileName}`);
    }
    
    // 上传文件功能
    async function uploadFile() {
      const fileInput = document.getElementById('audioFile');
      if (!fileInput.files.length) {
        logMessage('❌ 请选择音频文件');
        return;
      }
      
      const file = fileInput.files[0];
      const formData = new FormData();
      formData.append("file", file);
      
      try {
        const response = await fetch("http://127.0.0.1:5000/api/uploads2", {
          method: "POST",
          body: formData
        });
        
        if (!response.ok) {
          const text = await response.text();
          logMessage(`❌ 上传失败：${text}`);
          return;
        }
        
        const data = await response.json();
        document.getElementById('audioFilename').textContent = data.file_path;
        logMessage(`✅ 音频文件上传成功：${data.file_path}`);
      } catch (err) {
        logMessage(`❌ 上传请求出错：${err.message}`);
      }
    }
    
    async function uploadVideo() {
      const fileInput = document.getElementById('videoFile');
      if (!fileInput.files.length) {
        logMessage('❌ 请选择视频文件');
        return;
      }
      
      const file = fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      
      try {
        const response = await fetch('http://127.0.0.1:5000/api/uploads2', {
          method: 'POST',
          body: formData
        });
        
        if (!response.ok) {
          throw new Error(`上传失败: ${response.status}`);
        }
        
        const data = await response.json();
        document.getElementById('videoFilename').textContent = data.file_path;
        logMessage(`✅ 视频文件上传成功：${data.file_path}`);
      } catch (error) {
        logMessage(`❌ 上传失败: ${error.message}`);
      }
    }
    
    // 播放数字人视频
    function playVideo(videoId) {
      logMessage(`▶️ 正在播放数字人视频: ${videoId}`);
      // 实际应用中这里会加载并播放视频
    }
    
    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
      logMessage('✅ 系统已就绪，请上传音频和视频文件开始合成');
      
      // 为文件选择添加事件处理
      document.getElementById('audioFile').addEventListener('change', function(e) {
        if(e.target.files.length > 0) {
          document.getElementById('audioFilename').textContent = e.target.files[0].name;
        }
      });
      
      document.getElementById('videoFile').addEventListener('change', function(e) {
        if(e.target.files.length > 0) {
          document.getElementById('videoFilename').textContent = e.target.files[0].name;
        }
      });
    });
  </script>
</body>
</html>